<template>
<div>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card>
                <el-row>
                    <el-col :span="18">
                        轨道检测数据总时间跨度<br>
                        <p class="number">{{ years }}</p> 年
                    </el-col>
                    <el-col :span="6">
                        <img class="img-card1" src="@/assets/train.png">
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card>
                <el-row>
                    <el-col :span="18">
                        轨道检测数据总检测次数<br>
                        <p class="number"> {{ times }} </p> 次
                    </el-col>
                    <el-col :span="6">
                        <img class="img-card1" src="@/assets/train.png">
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card>
                <el-row>
                    <el-col :span="18">
                        轨道检测数据总数据量达<br>
                        <p class="number"> {{ total }} </p> 条
                    </el-col>
                    <el-col :span="6">
                        <img class="img-card1" src="@/assets/train.png">
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
    <el-card class="secondCard">
        <div id="myChart" :style="{width: '1000px', height: '300px'}"></div>
    </el-card>
</div>
</template>

<script>
var echarts = require("echarts")

export default {
    data() {
        return {
            years: 8,
            times: 277,
            total: 726114020,
            trackdd: []
        }
    },
    mounted() {
        this.drawLine()
    },
    methods: {
        async drawLine() {
            let myChart = echarts.init(document.getElementById('myChart'))
            // 空图
            myChart.setOption({
                title: {
                    text: '近期轨检数据综合展示',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: [],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            })
            // showloading
            myChart.showLoading();

            const res = await this.$http.post('getLeastTrackData');
            this.trackdd = res.data.data;
            //console.log(this.trackdd[0].length)
            const len = this.trackdd[0].length;
            var xdata = new Array(len)
            for (var i = 0; i < len; i++) {
                xdata[i] = i + 1;
            }

            // loading
            myChart.hideLoading();
            myChart.setOption({
                title: {
                    text: '近期轨检数据综合展示',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: ['左高低(mm)', '右高低(mm)', '左轨向(mm)', '右轨向(mm)', '轨距(mm)'],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '左高低(mm)',
                    data: this.trackdd[0],
                    type: 'line'
                }, {
                    name: '右高低(mm)',
                    data: this.trackdd[1],
                    type: 'line'
                }, {
                    name: '左轨向(mm)',
                    data: this.trackdd[2],
                    type: 'line'
                }, {
                    name: '右轨向(mm)',
                    data: this.trackdd[3],
                    type: 'line'
                }, {
                    name: '轨距(mm)',
                    data: this.trackdd[4],
                    type: 'line'
                }]
            })

        }
    }
}
</script>

<style>
.number {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
}

.img-card1 {
    width: 60px;
    height: 60px;
    margin-top: 10px;
}

.secondCard {
    margin-top: 10px;
}

#myChart {
    margin-left: 50px;
}
</style>
